<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-09-25 09:48:13
 * @LastEditTime: 2024-03-30 14:18:23
 * @FilePath: \client\src\pages\company\list.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->
<template>
	<yplayout>
		<template #header="props">
			<div class="flex items-center">
				<i class="ri-2x text-gray-500 ml-2" :class="props.meta.icon || 'ri-information-line'"></i>
				<div class="text-xl px-2" v-html="props.meta.title"></div>
				<div class="text-gray-400"></div>
			</div>
			<div class="flex-1"></div>
			<button class="btn btn-chen mr-4" type="button" @click="router.push('add')">
				<i class="ri-add-line ri-lg pr-1"></i>增加
			</button>
		</template>
		<template #list>
			<div class="grid text-sm px-4 space-y-2 *:flex *:items-center 2xl:grid-cols-3 lg:grid-cols-2">
				<div class="mt-2">
					<div class="w-24 text-right pr-5">企业名称</div>
					<div class="flex-1">
						<ypinput v-model="queryParams.name" placeholder="请输入企业名称"></ypinput>
					</div>
				</div>
				<div>
					<div class="w-24 text-right pr-5">联系人</div>
					<div class="flex-1">
						<ypinput v-model="queryParams.contact" placeholder="请输入联系人"></ypinput>
					</div>
				</div>
				<div>
					<div class="w-24 text-right pr-5">联系电话</div>
					<div class="flex-1">
						<ypinput type="tel" v-model="queryParams.phone" placeholder="请输入联系电话"></ypinput>
					</div>
				</div>
				<div>
					<div class="w-24 text-right pr-5">法人</div>
					<div class="flex-1">
						<ypinput v-model="queryParams.legal" placeholder="请输入法人"></ypinput>
					</div>
				</div>
				<template v-if="showAll">
					<div>
						<div class="w-24 text-right pr-5">全国地区</div>
						<div class="flex-1">
							<ypmselect pid="168" v-model="queryParams.area"></ypmselect>
						</div>
					</div>
					<div>
						<div class="w-24 text-right pr-5">公司地址</div>
						<div class="flex-1">
							<ypinput v-model="queryParams.address" placeholder="请输入公司地址"></ypinput>
						</div>
					</div>
					<div>
						<div class="w-24 text-right pr-5">店铺总数</div>
						<div class="flex-1">
							<ypinput
								v-model="queryParams.totalstores"
								type="number"
								placeholder="请输入店铺总数"
							></ypinput>
						</div>
					</div>
				</template>
				<div class="justify-end flex space-x-2 2xl:col-span-2">
					<button class="btn btn-lan" @click="toSearch">查询</button>
					<button class="btn" @click="reset">重置</button>
					<div v-if="showAll" class="text-lan-300 cursor-pointer" @click="showAll = false">
						<span>收起</span>
						<i class="ri-arrow-up-s-line ri-lg"></i>
					</div>
					<div v-else class="text-lan-300 cursor-pointer" @click="showAll = true">
						<span>展开</span>
						<i class="ri-arrow-down-s-line ri-lg"></i>
					</div>
				</div>
			</div>

			<div class="p-5">

				<table class="yp-table-datalist">
					<thead>
						<tr>
							<th>ID</th>
							<th>企业名称</th>
							<th>联系人</th>
							<th>联系电话</th>
							
							<th>状态</th>
							<th>店铺总数</th>
							<th class="hidden xl:block">截止日期</th>
							<th>业务员</th>
							<th>备注</th>
							<th class="w-40 text-center">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, index) in dataList" :key="index">
							<td>{{ item.id }}</td>
							<td>{{ item.name }}</td>
							<td>{{ item.contact }}</td>
							<td>{{ item.phone }}</td>
							
							<td>
								<span :class="{'text-hong-300':item.status===0,'text-lan-300':item.status===1,'text-zi-300':item.status===-1}" @click="openStatusDialog(item.id)">{{ statusJson[item.status].title }}</span>
							</td>
							<td>{{ item.totalstores }}</td>
							<td class="hidden xl:block">{{ item.endtime || '永久' }}</td>
							<td>{{ item.admin_id_name }}</td>
							<td>{{ item.intro }}</td>
							<td class="space-x-2">
								<div class="flex items-center space-x-2">
									<button
										v-if="autBtn('company').indexOf('view') >= 0"
										class="btn btn-lan"
										@click="router.push(`view?id=${item.id}`)"
									>
										查看
									</button>
									<button
										v-if="autBtn('company').indexOf('edit') >= 0"
										class="btn btn-chen"
										@click="router.push(`edit?id=${item.id}`)"
									>
										编辑
									</button>
									<button
										v-if="autBtn('company').indexOf('technician') >= 0"
										class="btn"
										:class="item.status == 1 ? 'btn-zi' : 'btn-disabled'"
										@click="item.status == 1 ? openDialog(item.id) : ''"
									>
										服务器
									</button>
									<button
										v-if="autBtn('company').indexOf('delete') >= 0"
										class="btn btn-hong"
										@click="destory(item.id)"
									>
										删除
									</button>
								</div>
							</td>
						</tr>
					</tbody>
				</table>



			</div>


			<div class="mt-3" v-if="pageData.pageCount > 1">
				<yppage @topage="topage" :pageData="pageData" />
			</div>
		</template>
	</yplayout>
	<ypdialog v-if="showDialog" :isFull="true" :mask="1" top="6%" title="编辑服务器信息" @close="showDialog = false">
		<component :is="componentId" :companyId="companyId" @close="showDialog = false" />
	</ypdialog>
	<ypdialog
		v-if="statusDialogVisiable"
		:mask="1"
		title="选择状态"
		top="40%"
		width="500"
		@close="statusDialogVisiable = false"
	>
		<div class="flex space-x-5">
			<button
				v-for="(item, index) in statusJson"
				:key="index"
				:class="['btn', item.color]"
				type="button"
				@click="handleSetStatus(index)"
			>
				设为{{ item.title }}
			</button>
		</div>
	</ypdialog>
</template>

<script setup>
	import { useRouter } from 'vue-router'
	import { ref, reactive, onActivated, shallowRef } from 'vue'
	import { getData, postData, alter, confirms, autBtn } from '@/common/base'
	import servrInfo from './serverInfo.vue'
	import store from '@/store'
	//变量
	const router = useRouter()
	const dataList = reactive([])
	const showAll = ref(false)
	const queryParams = reactive({
		area: []
	})
	const componentId = shallowRef(servrInfo)
	const showDialog = ref(false)
	const companyId = ref()

	const statusJson = {
		0: {
			title: '禁用',
			color: 'btn-hong'
		},
		'-1': {
			title: '已到期',
			color: 'btn-lan'
		},
		1: {
			title: '正常',
			color: 'btn-lv'
		}
	}
	const statusDialogVisiable = ref(false)
	const openStatusDialog = (id) => {
		companyId.value = id
		statusDialogVisiable.value = true
	}
	const handleSetStatus = async (status) => {
		await postData('company/setstatus', { id: companyId.value, status })
		companyId.value = ''
		statusDialogVisiable.value = false
		getDataList()
	}

	const openDialog = (id) => {
		companyId.value = id
		showDialog.value = true
	}
	//分页
	const limit = ref(5)
	const pageData = reactive({
		totalRecords: 0, //总记录数
		pageCount: 0, //总页数
		currentPage: router.currentRoute.value.query.page || 1 //当前页
	})
	//方法
	const reset = () => {
		for (let key in queryParams) {
			if (Array.isArray(queryParams[key])) {
				queryParams[key] = [null]
			} else {
				queryParams[key] = ''
			}
		}
	}
	const destory = async (id) => {
		confirms({ text: '确认删除吗？' })
			.then(async () => {
				const resp = await postData('company/delete', { ids: id })
				if (resp.code == 1) {
					alter({ type: 'alter-success', text: resp.msg })
					getDataList()
				}
			})
			.catch((e) => {})
	}
	const topage = (page) => {
		pageData.currentPage = page
		router.push('?page=' + page)
		getDataList()
	}
	const toSearch = () => {
		const query = []
		Object.keys(queryParams).forEach((col) => {
			let value = queryParams[col]
			if (col == 'area') {
				value = value.filter((v) => v)
				value = JSON.stringify(value)
			}
			query.push({ col, value })
		})
		pageData.currentPage = 1
		router.push('?page=1')
		getDataList(query)
	}
	const getDataList = async (query = []) => {
		const res = await getData('company/index', {
			query,
			page: pageData.currentPage,
			limit: limit.value
		})
		const { data, last_page, total } = res.data
		if (pageData.currentPage > last_page && last_page !== 0) {
			topage(1)
		} else {
			pageData.totalRecords = total
			pageData.pageCount = last_page
			dataList.length = 0
			data.map((item) => {
				dataList.push(item)
			})
		}
	}
	onActivated(() => {
		getDataList()
	})
</script>
